<template>
  <el-dialog
    title="读卡服务安装包下载"
    :visible.sync="crVisible"
    width="350px"
    z-index="1400"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :before-close="handleClose">
    <div class="crLoad_wrap">
      <div class="tip fc_red">未安装读卡服务，请下载安装！</div>
      安装包：<span>{{loadUrl}}</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="crVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="handleLoad">下载</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    crLoadVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // loadUrl: window.g.CARDREADER_LOAD_URL || '/kycardreader-setup4.1.5.zip'
    }
  },
  computed: {
    appConfig() {
      return this.$store.state.settings.appConfig
    },
    loadUrl() {
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.CARDREADER_LOAD_URL) || window.g.CARDREADER_LOAD_URL || '/kycardreader-setup4.1.5.zip'
    },
    crVisible: {
      get() {
        return this.crLoadVisible
      },
      set(val) {
        this.$emit('update:crLoadVisible', val)
      }
    }
  },
  methods: {
    handleClose() {
      this.crVisible = false
    },
    handleLoad() {
      const urlSplit = this.loadUrl.split('/')
      // 下载
      const a = document.createElement('a') // 创建一个<a></a>标签
      a.href = this.loadUrl // 将流文件写入a标签的href属性值
      a.download = urlSplit[urlSplit.length - 1] // 设置文件名
      a.style.display = 'none' // 障眼法藏起来a标签
      document.body.appendChild(a) // 将a标签追加到文档对象中
      a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove() // 一次性的，用完就删除a标签
    }
  }
}
</script>
